// 1.导入Vue和 VueRouter的包
import Vue from "vue";
import VueRouter from "vue-router";
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'
import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'

// 2.调用Vue.use函数 把Vue-router安装为vue的插件
Vue.use(VueRouter)

// 3.创建路由的实例对象
const router = new VueRouter({
  //routers 是一个数组，作用： 定义“hash” 地址与组件之间的对应关系
  routes: [
    // 路径之前有个#  这里配置不用写， vue中已经处理
    {path: '/', component: Home},
    {path: '/home', component: Home},
    // 路由中的动态参数： 进行声明，冒号后面的是动态参数的名称
    {path: '/movie/:mid', component: Movie, props: true},
    //  将以下三个路由规则，合并成了一个，提高了路由一则的复用性
    // {path: '/movie/1', component: Movie},
    // {path: '/movie/2', component: Movie},
    // {path: '/movie/3', component: Movie},
    {
      path: '/about', 
      component: About,
      // redirect: '/about/tab1',
      // 子路由规则，默认子路由： 如果children 数组中，某个路由规则的path 值为空字符串，则这条路由叫做默认子路由
      children: [
        {path: '', component: Tab1},
        {path: 'tab2', component: Tab2}
      ]
    }
  ]
})

// 调用路由实例对象的beforeEash方法， 即可声明”全局前置守卫“
// 每次发生路由跳转的时候，都会自动触发回调函数
router.beforeEach(function (to, from, next) {
  // to : 是将要访问的路由信息对象
  // from 是将要离开的路由信息对象
  // next 是一个函数， 调用next函数包是放行， 允许这次路由导航， 如果不调用next函数， 那么路由导航就不会生效
})

// 4. 向外共享路由的实例对象
export default router